<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期示例</title>
</head>
<body>
<div id="app">
    <h3>生命周期演示</h3>

    <button @click="add">add</button>
    <br>
    <button @click="bye">销毁vue</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    const vm=new Vue({
        el:"#app",
        data(){
            return{
                n:1
            }
        },
        methods:{
            add(){
                this.n++
            },
            bye(){
                this.$destroy()
            }
        },
        //以下是八个钩子(生命周期函数)
        //初始化之前
        beforeCreate(){
            console.log("beforeCreate，初始化生命周期和事件，数据代理还未开始，无法访问data中的数据和vm中的方法")
        },
        //初始化之后
        created(){
            console.log("created,数据监测和数据代理已完成，可以访问data中的数据和methods中的方法")
            console.log(this.n)
        },
        //挂载之前
        beforeMount(){
            console.log("beforeMount,当前页面展示的都是未经过vue编译的dom结构，所有对dom的操作，都是不生效的")
        },
        //挂载之后，
        mounted(){
            console.log("mounted,vue完成模板的解析并把真实的dom挂载到页面上调用，初始化完成")
        },
        //更新之前
        beforeUpdate(){
            this.n=10
            console.log("beforeUpdate，此时data中的数据是最新的，但是页面上的数据不发生变更")
            console.log(this.n)
        },
        //更新之后
        updated(){
            console.log("updated，此时data中的数据和页面上的数据保持一致")
        },
        //销毁之前
        beforeDestroy(){
            console.log("beforeDestroy，vue销毁之前，此时的data和methods仍处于可用的状态")
            console.log(this.n)
            debugger
        },
        //销毁之后
        destroyed(){
            console.log("destroyed,vue被销毁、其中的data以及绑定关系被清除、但是已经被加载的dom不会被影响")
            console.log(this.n)
        }
    })
</script>
</body>
</html>
